<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test i18n</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- Requesting webcontext.js one level above to workaround the filter on PDI issue (BACKLOG-17885) -->
  <!-- Remove '../' when not needed -->
  <script type="text/javascript" src="../webcontext.js?requireJsOnly=true"></script>

  <script type="text/javascript">
    var baseUrl = '/i18n/i18n.html';
    var locale = getParameterByName('l');

    SESSION_LOCALE = locale != null && locale != '' ? locale : 'en';

    require(["common-ui/jquery", "pentaho/i18n-osgi!test.messages"], function($, bundle) {
      $('#title').text(bundle.structured['title']);

      $('#btnChange').click(function() {
        var locale = $('#language option:selected').val();
        window.location = baseUrl + '?l=' + locale;
      });
    });

    function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));
    } 
  </script>
</head>
<body>
<div class="container">
  <h1 id="title"></h1>

  <select id="language">// 
    <option value="en">Default Language</option>
    <option value="fr">French</option>
    <option value="pt">Portuguese</option>
  </select>
  <button id="btnChange">Change language</button>
</div>
</body>
</html>